import {
  Button,
  Divider,
  Grid,
  ListItem,
  Theme,
  Typography
} from "@material-ui/core";
import createStyles from "@material-ui/core/styles/createStyles";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import { SwipeAction } from "antd-mobile";
import * as React from "react";
import { medicalcardSet } from "../../store/modules/medicalcard/action";
import { AppPageProps } from "../../types/AppPageProps";
import { deleteMedicalCard } from "../../utils/RequestUtils";
import CardHeader from "./CardHeader";

const styles = (theme: Theme) =>
  createStyles({
    cardTitle: {
      marginTop: 5,
      marginBottom: 5,
      fontWeight: 700
    },
    cardButtomMy: {
      position: "fixed",
      bottom: "0px",
      width: "100%",
      textAlign: "center",
      backgroundColor: "rgb(245, 245, 245)"
    }
  });
interface cardParam {
  property: string;
  name: string;
  idCard: string;
  sex: string;
  cardNumber: string;
  hospital: string;
  note: string;
  phoneNumber: string;
  verificationCode: string;
}
interface props extends WithStyles<typeof styles>, AppPageProps {
  list: cardParam[];
}

class MyMedicalCard extends React.Component<props> {
  constructor(props: props) {
    super(props);
  }
  public componentWillMount() {
    this.refresh();
  }
  public addCard = () => {
    this.props.history.push({
      pathname: "/medicalcard/new"
    });
  };
  public refresh() {
    this.props.dispatch(medicalcardSet({}));
  }
  public openOrClose(value: any) {
    console.log("删除");
    deleteMedicalCard(value.id).then(() => {
      this.refresh();
    });
  }
  public render() {
    const { classes, list = [] } = this.props;
    return (
      <div>
        <CardHeader title={"我的就诊卡"} diplayButton={false} />
        <Typography variant="subheading" color="inherit" align={"right"}>
          {"你还可以绑定三张就诊卡"}
        </Typography>
        {list.map((v, i) => {
          return (
            <div key={i}>
              <SwipeAction
                style={{ backgroundColor: "gray" }}
                autoClose={true}
                right={[
                  {
                    text: "删除",
                    onPress: this.openOrClose.bind(this, v),
                    style: { backgroundColor: "#F4333C", color: "white" }
                  }
                ]}
              >
                <Divider />
                <ListItem button={true}>
                  <Grid item={true} xs={10}>
                    <Grid container={true} className={classes.cardTitle}>
                      {v.name}({v.property})
                    </Grid>
                    <Grid>
                      注册医院：
                      {v.hospital}
                    </Grid>
                    <Grid>
                      身份证号：
                      {v.idCard}
                    </Grid>
                    <Grid>
                      就诊卡号：
                      {v.hospital}
                    </Grid>
                  </Grid>
                </ListItem>
              </SwipeAction>
            </div>
          );
        })}
        <div className={classes.cardButtomMy}>
          <Button
            variant="contained"
            color={"primary"}
            fullWidth={true}
            style={{ width: "80%" }}
            onClick={this.addCard}
          >
            新增就诊卡
          </Button>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(MyMedicalCard);
